<template>
  <el-menu :default-active="$route.path" class="navbar" mode="horizontal">
    <el-menu-item index="/" @click="navigateToHome">首页</el-menu-item>
    <el-menu-item index="/restaurants" @click="navigateToRestaurants">餐厅列表</el-menu-item>
    <el-menu-item index="/user-profile" @click="navigateToUserProfile">用户信息</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  methods: {
    navigateToHome() {
      this.$router.push({ name: 'Home' });
    },
    navigateToRestaurants() {
      this.$router.push({ name: 'RestaurantList' });
    },
    navigateToUserProfile() {
      this.$router.push({ name: 'UserProfile' });
    },
  },
};
</script>

<style scoped>
.navbar {
  background-color: #FFD700; /* 导航栏背景色 */
  border-bottom: 1px solid #eaeaea; /* 底部边框 */
}

.el-menu-item {
  font-size: 16px; /* 字体大小 */
  color: #333; /* 字体颜色 */
}

.el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1); /* 悬浮效果 */
}
</style>